<template>
	<div style="display: flex;">
		<div style="width: 200px;background-color:#F4F6F8;border-right: 1px solid rgb(220, 227, 232);"
			class="task-management-menu-container">
			<div style="display: flex;margin:10px;" v-for="(menuItem,index) in menuItemList" :key="index"
				class="task-management-item" @click="onPageChangeHandler(menuItem)">
				<img :src="menuItem.image" style="width:24px;height:24px;" />
				<div style="margin-left:5px;margin-right:5px;">{{menuItem.label}}</div>
			</div>
		</div>
		<div style='flex-grow: 1;'>
			<div style="border-bottom: 1px solid #ddd;">
				<h4>{{currentPageTitle}}</h4>
			</div>
			<div style="margin:0px 5px;">
				<el-card style="margin-top: 10px;" v-for="(item,index) in taskList" :key="index">
					<el-row>
						<el-col :span="3">
							<img src="../../assets/4.png" style="width:48px;height:48px;" />
						</el-col>
						<el-col :span="6">
							<div style="font-weight: bold;">{{item.processName}}</div>
							<div style="margin-top: 10px;">{{item.taskName}}</div>
							<div>
								<el-tag type="warning">{{item.processStateName}}</el-tag>
							</div>
						</el-col>
						<el-col :span="9">
							<div style="display: flex;">
								<div style="width:100px;">
									{{item.doc_label_0}}:
								</div>
								<div>
									{{item.doc_value_0}}
								</div>
							</div>
							<div style="display: flex;;">
								<div style="width:100px;">
									{{item.doc_label_1}}:
								</div>
								<div>
									{{item.doc_value_1}}
								</div>
							</div>
							<div style="display: flex;">
								<div style="width:100px;">
									{{item.doc_label_2}}:
								</div>
								<div>
									{{item.doc_value_2}}
								</div>
							</div>
						</el-col>
						<el-col :span="6" style="text-align: right;">
							<div>{{item.taskCreteTime}}</div>
							<div>
								<div>
									<el-button size="small" @click.prevent="onResubmitClickHandler(index)" type="text"
										v-if="item.canUserInput==true">
										重新提交
									</el-button>
									<el-button size="small" @click.prevent="onApproveClickHandler(index)" type="text"
										v-if="item.canUserInput==false">
										同意
									</el-button>
									<el-button size="small" @click.prevent="onRejectClickHandler(index)" type="text"
										v-if="item.canUserInput==false">
										拒绝
									</el-button>
								</div>
								<div>
									<el-button size="small" @click.prevent="onBackClickHandler(index)" type="text"
										v-if="item.canBack==true">
										打回
									</el-button>
									<el-button size="small" @click.prevent="onDocClickHandler(index)" type="text">
										单据
									</el-button>
									<el-button size="small" @click.prevent="onDiagramClickHandler(index)" type="text">
										流程图
									</el-button>
								</div>

							</div>
						</el-col>
					</el-row>
				</el-card>
				<el-pagination background layout="prev, pager, next" :total="total" :page-size="5"
					v-model:current-page="currentPage" @current-change="currentPageChange"
					v-show="currentPageType=='init' ||currentPageType=='processed'">
				</el-pagination>
			</div>
		</div>
		<el-dialog title="意见" v-model="approveDialogVisible" width="40%">
			<el-input type='textarea' v-model="opinion" />
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onApproveOkClickHandler()" size="small">同意</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="意见" v-model="rejectDialogVisible" width="40%">
			<el-input type='textarea' v-model="opinion" />
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onRejectOkClickHandler()" size="small">拒绝</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="意见" v-model="backDialogVisible" width="40%">
			<el-input type='textarea' v-model="opinion" />
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onBackOkClickHandler()" size="small">打回</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="单据" v-model="docDialogVisible" width="80%">
			<PageComponent ref="pageComponent"></PageComponent>
		</el-dialog>
		<el-dialog title="流程图" v-model="diagramDialogVisible" width="80%">
			<WorkflowDesigner ref="workflowDesigner" :paraMap="paraMap"></WorkflowDesigner>
		</el-dialog>
	</div>
</template>

<script>
	import image1 from "@/assets/1.png";
	import image2 from "@/assets/2.png";
	import image3 from "@/assets/3.png";
	import $ from 'jquery';
	import PageComponent from '@/components/PageComponent.vue';
	import WorkflowDesigner from '@/views/devpage/webide/workflow/workflowdesigner/WorkflowDesigner.vue';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "WorkflowTaskManagement",
		components: {
			PageComponent,
			WorkflowDesigner
		},
		data() {
			return {
				menuItemList: [{
						"label": "我的待办",
						"type": "todo",
						"image": image1
					},
					{
						"label": "我发起的",
						"type": "init",
						"image": image2
					},
					{
						"label": "我处理的",
						"type": "processed",
						"image": image3
					},
				],
				taskList: [],
				approveDialogVisible: false,
				opinion: "",
				currentIndex: -1,
				rejectDialogVisible: false,
				docDialogVisible: false,
				diagramDialogVisible: false,
				paraMap: {},
				backDialogVisible: false,
				currentPageType: "todo",
				currentPageTitle: "我的待办",
				total: 0,
				currentPage: 1
			}
		},
		mounted() {
			$(".task-management-menu-container").height($(window).height() - 120);
			this.init();
		},
		methods: {
			init() {
				var that = this;
				restUtil.getAction(this,"workflowtaskmanagement/init").then(
					function(response) {
						if (response.data.code == 1) {
							that.taskList = response.data.taskList;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			onApproveClickHandler(index) {
				this.opinion = "";
				this.currentIndex = index;
				this.approveDialogVisible = true;
			},
			onApproveOkClickHandler() {
				this.approveDialogVisible = false;
				var that = this;
				restUtil.postAction(this,"workflowtaskmanagement/approve?taskId=" + this.taskList[this
						.currentIndex].taskId +
					"&opinion=" + this.opinion).then(
					function(response) {
						if (response.data.code == 1) {
							that.init();
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			onRejectClickHandler(index) {
				this.opinion = "";
				this.currentIndex = index;
				this.rejectDialogVisible = true;
			},
			onRejectOkClickHandler() {
				this.rejectDialogVisible = false;
				var that = this;
				restUtil.postAction(this,"workflowtaskmanagement/reject?taskId=" + this.taskList[this
						.currentIndex].taskId +
					"&opinion=" + this.opinion).then(
					function(response) {
						if (response.data.code == 1) {
							that.init();
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			onDocClickHandler(index) {
				this.currentIndex = index;
				this.docDialogVisible = true;
				this.$nextTick(function() {
					this.$refs.pageComponent.navigatePage(this.taskList[index].formCode, {
						"action": "dataView",
						"id": this.taskList[index].bizKey
					});
				});
			},
			onDiagramClickHandler(index) {
				this.currentIndex = index;
				this.diagramDialogVisible = true;
				this.paraMap["code"] = this.taskList[index].processCode;
				this.paraMap["view"] = true;
				this.$nextTick(function() {
					this.$refs.workflowDesigner.init();
				});
			},
			onBackClickHandler(index) {
				this.opinion = "";
				this.currentIndex = index;
				this.backDialogVisible = true;
			},
			onBackOkClickHandler() {
				var that = this;
				this.backDialogVisible = false;
				restUtil.postAction(this,"workflowtaskmanagement/back?taskId=" + this.taskList[this
						.currentIndex].taskId +
					"&opinion=" + this.opinion).then(
					function(response) {
						if (response.data.code == 1) {
							that.init();
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			onResubmitClickHandler(index) {
				this.currentIndex = index;
				var that = this;
				restUtil.postAction(this,"workflowtaskmanagement/resubmit?taskId=" + this.mytaskList[this
						.currentIndex].taskId)
					.then(
						function(response) {
							if (response.data.code == 1) {
								that.init();
							} else {
								that.$alert(response.data.message, '提示')
							}
						});
			},
			onPageChangeHandler(menuItem) {
				var that = this;
				restUtil.getAction(this,"workflowtaskmanagement/onPageChangeHandler?pageType=" + menuItem.type)
					.then(
						function(response) {
							if (response.data.code == 1) {
								that.currentPageType = menuItem.type;
								that.currentPageTitle = menuItem.label;
								that.taskList = response.data.taskList;
								that.total = response.data.total;
							} else {
								that.$alert(response.data.message, '提示')
							}
						});
			},
			currentPageChange() {
				var that = this;
				restUtil.getAction(this,"workflowtaskmanagement/onPageHandler?pageType=" + this
						.currentPageType + "&page=" + this.currentPage)
					.then(
						function(response) {
							if (response.data.code == 1) {
								that.taskList = response.data.taskList;
								that.total = response.data.total;
							} else {
								that.$alert(response.data.message, '提示')
							}
						});
			}
		},
	}
</script>

<style>

</style>
